<template>
    <item
        :label-width="labelWidth"
        :help="help"
        :required="required"
        :label="label">
        <el-date-picker
            style="width: 220px"
            v-model="dateRange"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            @clear="clearDate"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        ></el-date-picker>
    </item>
</template>
<script>
import item from './item.vue'
import dayjs from 'dayjs'
export default {
    emit: ["update:start_time", "update:end_time"],
    props: {
        // 标签名称
        label: {
            type: String,
            default: ''
        },
        // 标签宽度
        labelWidth: {
            type: String,
            default: '120px'
        },
        // 帮助信息，显示在左侧label旁边出现一个帮助图标
        help: {
            type: String,
            default: ''
        },
        // 是否显示必填的红色星号*
        required: {
            type: Boolean,
            default: false
        },

        // 表单编辑组件
        // start_time 开始时间
        // end_time 结束时间
        // 绑定方式：v-model:start_time="xxxx"
        start_time: {
            type: [String , Number],
            default: ''
        },
        end_time: {
            type: [String , Number],
            default: ''
        }
    },
    data() {
        return {
            // 开始/结束时间戳，用于确定是否修改时间信息
            st_tm: 0,
            en_tm: 0,

            // 日期范围
            dateRange: [],
        }
    },
    methods: {
        // 日期范围编辑
        dateRangeEdit(){
            if(this.dateRange.length > 0){
                this.st_tm = dayjs(this.dateRange[0]+" 00:00:00").unix()
                this.en_tm = dayjs(this.dateRange[1]+" 23:59:59").unix()
                this.$emit("update:start_time", this.st_tm)
                this.$emit("update:end_time", this.en_tm)
            } else {
                this.st_tm = 0
                this.en_tm = 0
                this.$emit("update:start_time", this.st_tm)
                this.$emit("update:end_time", this.en_tm)
            }
        },
        clearDate(){
            this.dateRange = []
            this.st_tm = 0
            this.en_tm = 0
            this.$emit("update:start_time", this.st_tm)
            this.$emit("update:end_time", this.en_tm)
        },
    },
    watch: {
        start_time(val) {
            if(this.st_tm != val && val > 0){
                this.st_tm = val
            }
            if(this.st_tm > 0 && this.en_tm > 0){
                this.dateRange = [
                    dayjs.unix(this.st_tm).format('YYYY-MM-DD'),
                    dayjs.unix(this.en_tm).format('YYYY-MM-DD')
                ]
            }
        },
        end_time(val) {
            if(this.en_tm != val && val > 0){
                this.en_tm = val
            }
            if(this.st_tm > 0 && this.en_tm > 0){
                this.dateRange = [
                    dayjs.unix(this.st_tm).format('YYYY-MM-DD'),
                    dayjs.unix(this.en_tm).format('YYYY-MM-DD')
                ]
            }
        },
        dateRange(){
            this.dateRangeEdit()
        },
    },
    components: {
        item,
    },
}
</script>